<template>
	<view>
		<view v-if="identity!= ''">
			<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" height="100%"
				@scroll="scroll" :sticky="true">

				<view class="list-box  u-p-20">
					<view class="list-li relative u-flex-between u-m-b-20 u-p-l-20" v-for="(item,index) in listData"
						:key="index" @tap.stop="handleDetails('/pages/manage/details',item)">
						<view class="u-font-36 c-000 u-m-b-20 u-font-16 f-w">
							姓名：{{item.appName}}
						</view>
						<view class="u-font-30 c-666 u-m-b-20">
							加油站：{{item.stationName}}
						</view>
						<view class="u-font-30 c-666 u-m-b-20">
							燃油类型：{{item.type}}<span class="u-m-l-20">数量：{{item.quantity}}升</span>
						</view>
						<view class="u-font-30 c-666">
							申请用途：{{item.purpose}}
						</view>
						<view class="text-center u-border-top u-m-t-30 u-p-t-20 c-000 u-font-15">
							详情
						</view>
						<view :class="tabs[item.status].css" style="position: absolute; top: 10px;right: 10px;">
							{{tabs[item.status].name}}
						</view>
					</view>
				</view>
				<view class="fixedcss u-flex u-flex-around  u-flex-y-center c-fff f-w text-center u-p-20"
					@click="apply"> 申请散装燃油 </view> 
			</mescroll-body>
		</view> 
		<view class="u-p-30" v-else>
			<view class="combox u-p-50 text-center">
				<view>
					<image src="@/static/images/noid.png" mode="" style="width: 200px;height: 200px;"></image>
				</view>
				<view class="u-font-18 f-w u-p-b-30 u-p-t-30">
					未实名暂不支持购买
				</view>
				<view class="u-m-t-80" @click="handleauth">
					<u-button type="primary" text="前去认证信息"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				identity: '',
				name:'',
				tabs: [{
						name: '未审核',
						css: 'shenhe'
					}, {
						name: '已通过',
						css: 'tg'
					},
					{
						name: '驳回',
						css: 'bohui'
					}
				],
				tabIndex: 0, // tab下标
				upOption: {
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					noMoreSize: 3, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					offset: 80, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '~暂无更多~', // 没有更多数据的提示文本
					toTop: {
						// 回到顶部按钮,需配置src才显示
						src: "https://www.mescroll.com/img/mescroll-totop.png", // 图片路径
						offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
						duration: 300, // 回到顶部的动画时长,默认300ms (当值为0或300则使用系统自带回到顶部,更流畅; 其他值则通过step模拟,部分机型可能不够流畅,所以非特殊情况不建议修改此项)
						zIndex: 9990, // fixed定位z-index值
						left: null, // 到左边的距离, 默认null. 此项有值时,right不生效. (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						right: 20, // 到右边的距离, 默认20 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						bottom: 120, // 到底部的距离, 默认120 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						safearea: false, // bottom的偏移量是否加上底部安全区的距离, 默认false, 需要适配iPhoneX时使用 (具体的界面如果不配置此项,则取mescroll组件props的safearea值)
						width: 72, // 回到顶部图标的宽度, 默认72 (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
						radius: "50%" // 圆角, 默认"50%" (支持20, "20rpx", "20px", "20%"格式的值, 其中纯数字则默认单位rpx)
					},
					empty: {
						use: true, // 是否显示空布局
						// icon: require('../../../static/images/empty.png'), // 图标路径
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					},
					onScroll: true // 是否监听滚动事件, 默认false, 仅mescroll-uni生效; mescroll-body直接声明onPageScroll (配置为true时,可@scroll="scroll"获取到滚动条位置和方向; 注意监听列表滚动是非常耗性能的,很容易出现卡顿,非特殊情况不要配置此项)
				},
				listData: [], //列表数据

			}
		},
		created() {
			this.identity = uni.getStorageSync('identity');
			this.name = uni.getStorageSync('userinfo').name;
			
			setTimeout(()=>{
				this.canReset && this.mescroll.resetUpScroll() // 重置列表数据为第一页
				this.canReset && this.mescroll.scrollTo(0, 0) // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题  
				this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
			}, 500);
		},
		methods: {
			handleauth() {
				uni.$u.route('pages/user/idCard/index');
			},
			apply() {
				uni.$u.route('pages/write/write');
			},
			handleDetails(url, item) {
				uni.$u.route(url, {
					id: item.id,
					type: 2
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
				// loadSwiper();
				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				let data = {
					status: this.tabIndex,
					current: page.num,
					size: page.size
				}
				this.$api.applyListAPi(data).then(res => {
					this.mescroll.endBySize(res.data.records.length, res.data.total); //必传
					// //设置列表数据
					if (page.num == 1) this.listData = []; //如果是第一页需手动制空列表
					this.listData = this.listData.concat(res.data.records); //追加新数据	
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			// 点击回到顶部按钮的回调
			topClick() {
				console.log('点击了回到顶部按钮');
			},

		},
	}
</script>

<style lang="scss" scoped>
	.fixedcss {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background-color: #2b6bff;
		line-height: 100rpx;
		left: 0;
		color: #fff;
	}

	.shenhe {
		color: #000
	}

	.tg {
		color: #2b6bff
	}

	.bohui {
		color: #f56c6c
	}

	.onShareCss {
		border: 1px solid #fff !important;
		background-color: #fff !important;
		padding: 0;
		margin: 0;
		width: 30px;
		height: 30px;
		border: none;
	}

	.list-box {
		.list-li {
			display: flex;
			padding: 20rpx;
			border-bottom: 1rpx solid #eee;
			background-color: #fff;
			position: relative;
			flex-direction: column;
			padding-left: 30px;

			.status {
				position: absolute;
				top: 20rpx;
				right: 40rpx;
			}

			.flex-item {

				padding: 20rpx 0;

				.c-666 {
					display: inline-block;
					width: 56px;
					text-align-last: justify;
				}

				.item {
					font-size: 26rpx;
					margin-left: 16rpx;
				}
			}
		}
	}
</style>